<template>
	<view class="margin-sm">

		<!-- 收货人 -->
		<use-list-title v-if="!(addrData && addrData._id)" class="margin-top-sm" type="round" color="#333" title="选择收货人"
			iconfont="icondizhi-" @goto="toaddr"></use-list-title>
		<view v-else class="use-area dflex-b" @click="toaddr">
			<view class="dflex">
				<view class="iconfont icondizhi- margin-right ft-main"></view>
				<view class="w-full dflex-wrap-w">
					<view class="margin-bottom-xs clamp-2">
						<text>{{ addrData.address }} {{ addrData.addr_detail }}</text>
					</view>
					<view>
						<text>{{ addrData.consignee }}</text>
						<text class="margin-left">{{ addrData.mobile }}</text>
					</view>
				</view>
			</view>

			<view class="iconfont iconjiantou-01 fs-sm"></view>
		</view>

		<view class="goods-area use-area">
			<!-- 商品列表 -->
			<view v-for="(item, idx) in goodsDatas" :key="idx" class="goods-item" :class="{ 'margin-top': idx > 0 }">
				<view class="pos-r">
					<image mode="aspectFill" :src="item.img" class="dflex-c border-radius-sm"></image>
				</view>
				<view class="flex1 padding-left-sm">
					<view class="dflex">
						<text class="title clamp-2">{{ item.name || '' }} {{ item.sku || '' }}</text>
					</view>
					<view class="pos-r dflex-b padding-top">
						<view class="dflex">
							<view class="price flex1">{{ item.transfer_price / 100 }}</view>
						</view>
						<!-- + - 数量 -->
						<use-number-box :min="1" :max="item.count" :value="item.count " :index="idx" direction="right"
							@eventChange="numberChange"></use-number-box>
					</view>
				</view>
			</view>
		</view>

		<view class="use-area">
			<view class="margin-right-xl">备注</view>
			<textarea class="bg-drak w-full border-radius-sm margin-top-sm padding" style="min-height: 70px;"
				v-model="order_desc" maxlength="200" auto-height placeholder="请填写买家备注"></textarea>
		</view>

		<view class="gap"></view>

		<!-- 底部  -->
		<view class="oper-area pos-f pos-b-full w-full dflex-b bg-main safe-area-inset-bottom padding-lr-sm">
			<view>

			</view>
			<view class="submit dflex-c border-radius-big padding-lr animated-all"
				:class="isubmit ? 'use-loading' : 'bg-base'" @click="submit">{{ !isubmit ? '提交订单' : '' }}</view>
		</view>

	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';

	// 收获人地址
	const _address = 'wmzmall-member-address'
	export default {
		computed: {
			...mapState(['islogin', 'member']),
		},
		data() {
			return {
				// 收货地址
				addrData: {},
				order_desc: "",
				isubmit: '',
				goodsDatas: [],
				_id: ''
			};
		},
		onLoad(options) {
			this._id = options.id
			this.goodsDatas = uni.getStorageSync('wmz_transfer_goods_data')
			uni.$on('__event_choice_address', data => {
				this.addrData = data;
			});
		},
		onShow() {
			if (this.addrData && this.addrData._id) return;
			this.$db[_address].where(`create_uid == "${this.member._id}"`).tofirst({
					orderby: 'is_default desc'
				})
				.then(res => {
					if (res && res.code === 200) {
						this.addrData = res.datas;
					}
				})

		},
		methods: {
			// 选择收货人
			toaddr() {
				uni.navigateTo({
					url: '/sub-user/pages/address/address?source=1',
					complete() {}
				});
			},
			// +- 下单数量
			numberChange(options) {
				let data = this.goodsDatas[options.index];
				data.select_num = options.number;
				if (this.goods_id) this.select_num = options.number;
			},
			submit() {

				if (!(this.addrData && this.addrData._id)) {
					this.$api.msg('请选择收货人');
					return;
				}
				if (this.isubmit) {
					this.$api.msg('提交中');
					return;
				}
				this.isubmit = 1;
				this.$func.wmzmall.call('order/createV5', {
					_id: this._id,
					goods: this.goodsDatas,
					addr_id: this.addrData._id,
					order_desc: this.order_desc
				}).then(res => {
					if (res.code === 200) {
						// 跳转支付页
						this.$api.topay({
							order_id: res.datas.order_id,
							money: res.datas.money,
							type: 'redirect'
						});
						return;
					}

					this.$api.alert(res.msg);
					this.$api.timerout(() => {
						this.isubmit = 0;
					}, 800);
				})
			},

		}
	};
</script>

<style lang="scss">
	page {
		background: $page-color-base;
		padding-bottom: 100rpx;
	}

	.goods-area {
		.goods-item {
			display: flex;

			.title {
				height: 72rpx;
			}

			.disabled {
				color: #fff !important;
				width: 70%;
				height: 70%;
				background-color: rgba(51, 51, 51, 0.5);
			}

			image {
				flex-shrink: 0;
				width: 180rpx;
				height: 180rpx;
			}
		}
	}

	.oper-area {
		z-index: 998;
		box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.1);
		height: 100rpx;
		height: calc(env(safe-area-inset-bottom) + 100upx);

		.submit {
			height: 66rpx;
		}
	}
</style>